<p>The mobile ActionSheet widget displays a set of choices related to a task the user initiates.</p>
<h3>Getting Started</h3>
<p>The Kendo mobile Application will automatically initialize a mobile ActionSheet widget for every <code>ul</code> element with <code>role</code>
data attribute set to <code>actionsheet</code> present in the views/layouts markup.
Alternatively, it can be initialized using a jQuery selector. The actionsheet element should contain one or more <code>li</code> elements, which should contian an <code>a</code> element.</p><div class="code-sample"><h4 class="code-title">Define an ActionSheet</h4><pre class="code prettyprint"><code>&lt;ul data-role="actionsheet"&gt;
  &lt;li&gt;&lt;a data-action="foo"&gt;Foo&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a data-action="bar"&gt;Bar&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</code></pre></div><p>On iOS, the ActionSheet is modal, and clicking on the background does not close it. A 'Cancel' action is
automatically added to the bottom of the actions.</p>
<span style="color:red">TODO: Android</span>

<h3>Opening ActionSheet</h3>
<p>The widget can be open when any mobile navigational widget (listview, button, tabstrip, etc.) is clicked or touched.
To do so, the navigational widget should have <code>data-rel="actionsheet"</code> and <code>href</code> attribute pointing to the ActionSheet's element <code>id</code> set.</p><div class="code-sample"><h4 class="code-title">mobile Button with associated ActionSheet</h4><pre class="code prettyprint"><code>&lt;a data-role="button" data-rel="actionsheet" href="#foo"&gt;Foo...&lt;/a&gt;
&lt;ul data-role="actionsheet" id="foo"&gt;
  &lt;li&gt;&lt;a data-action="foo"&gt;Foo&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a data-action="bar"&gt;Bar&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</code></pre></div><h3>Executing Actions</h3>
<p>Each link from the ActionSheet should have a <code>data-action</code> attribute, specifying the callback method to be executed when the user clicks/touches it.
The callback can be either a function, or a method of an object in the global scope.</p>

<p>The callback receives a object with two fields: <code>target</code> and (optional) <code>context</code> as a
parameter. The <code>target</code> points to the DOM element which has opened the Widget. The <code>context</code> field points
to the optional <code>actionsheet-context</code> attribute of the opening element.</p>

<p>After the method has been executed, the ActionSheet closes automatically.</p><div class="code-sample"><h4 class="code-title">Mobile ActionSheet actions</h4><pre class="code prettyprint"><code>&lt;a id="myButton" data-role="button" data-actionsheet-context="1" data-rel="actionsheet" href="#foo"&gt;Foo...&lt;/a&gt;
&lt;ul data-role="actionsheet" id="foo"&gt;
  &lt;li&gt;&lt;a data-action="foo"&gt;Foo&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a data-action="bar.baz"&gt;Bar&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
     function foo(e) {
         e.context; // 1
         e.target; // $("#myButton")
     }

     var bar = {
         baz: function(e) {
             e.context; // 1
             e.target; // $("#myButton")
         }
     }
&lt;/script&gt;</code></pre></div>
